﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet"
			href="/static/css/table.css" type="text/css">
		<!--以下3个js库必须按照顺序引入-->
		<!--vue脚本库-->
		<script type="text/javascript"
				src="/static/js/vue-3.2.4.global.js">
			<!--axios脚本库-->
		</script>
		<script type="text/javascript"
				src="/static/js/axios-0.18.0.min.js">
		</script>
		<!--我们自己封装的axios函数库 -->
		<script type="text/javascript"
				src="/static/js/axios-helper.js">
		</script>
	</head>

	<body id="app">
		<form action="" method="post">
			<table width="100%">
				<tr>
					<td>
						<font color="black">您正在做的业务是：人力资源--人力资源档案管理--人力资源档案查询 </font>
					</td>
				</tr>
				<tr>
					<td>
						符合条件的人力资源档案总数：{{page.total}}例
					</td>
				</tr>
			</table>
			<table width="100%" border="1" cellpadding=5 cellspacing=1
				   bordercolorlight=#848284 bordercolordark=#eeeeee
				   class="TABLE_STYLE1">
				<tr class="TR_STYLE1">
					<td width="16%" class="TD_STYLE1">
						档案编号
					</td>
					<td width="13%" class="TD_STYLE1">
						姓名
					</td>
					<td width="8%" class="TD_STYLE1">
						性别
					</td>
					<td width="14%" class="TD_STYLE1">
						I级机构
					</td>
					<td width="14%" class="TD_STYLE1">
						II级机构
					</td>
					<td width="14%" class="TD_STYLE1">
						III级机构
					</td>
					<td width="14%" class="TD_STYLE1">
						职位分类
					</td>
					<td width="7%" class="TD_STYLE1">
						职位名称
					</td>
				</tr>

				<tr class="TR_STYLE2" v-for="h in humanFileDigList">
					<td width="16%" class="TD_STYLE2">
						<!--							query_list_information.html-->
						<a href="javascript:void(0)" @click="listId(h.hufid)">{{h.hufid}}</a>
					</td>
					<td width="13%" class="TD_STYLE2">
						{{h.humanName}}
					</td>
					<td width="8%" class="TD_STYLE2">
						{{h.humanSex}}
					</td>
					<td width="14%" class="TD_STYLE2">
						{{h.firstKindName}}
					</td>
					<td width="14%" class="TD_STYLE2">
						{{h.secondKindName}}
					</td>
					<td width="14%" class="TD_STYLE2">
						{{h.thirdKindName}}
					</td>
					<td width="14%" class="TD_STYLE2">
						{{h.humanMajorKindName}}
					</td>
					<td width="7%" class="TD_STYLE2">
						{{h.hunmaMajorName}}
					</td>
				</tr>
			</table>
			<p style="text-align: center;">


				<a href="javascript:void(0)" style="color:black;"
				   @click="goto(1)">首页</a>
				&nbsp;
				<a href="javascript:void(0)" style="color:black;"
				   @click="prevous()">上一页</a>
				&nbsp;
				<font color="red">{{page.current}}</font>
				&nbsp;
				<a href="javascript:void(0)" style="color:black;"
				   @click="next()">下一页</a>
				&nbsp;
				<a href="avascript:void(0)" style="color:black;"
				   @click="goto(maxPage)">尾页</a>


			</p>
		</form>
	</body>
	<script type="module">
		Vue.createApp({
			data(){
				return {
					humanFileDigList: [],
					maxPage:0,
					page:{
						current:1,
						size:5,
						total:null
					}
				}
			},
			created(){
				this.loadList();
			},
			methods:{
				listId(hufid){
					sessionStorage.setItem("hId",hufid);
					window.location.href="/templates/page/humanResources/change_list_information.html";
				},
				//跳转指定页码
				goto(num){
					//设置查询条件中的当前页码
					this.page.current = num;
					//重新加载用户列表
					this.loadList();
				},
				//上一页
				prevous(){
					//控制 当前页码-1 后始终不小于 1
					let current = this.page.current;
					current = (current - 1) < 1 ? 1 : (current - 1);
					//将当前页码设置到模型层
					this.page.current = current;
					//重新加载用户列表
					this.loadList();
				},
				//下一页
				next(){
					//控制 当前页码+1 后始终不超过最大页码
					let current = this.page.current;
					current = (current + 1) > this.maxPage ? this.maxPage : (current + 1);
					//将当前页码设置到模型层
					this.page.current = current;
					//重新加载用户列表
					this.loadList();
				},
				//加载用户列表
				loadList(){
					//get请求,调用查询用户列表的接口
					requestGet("/humanFileDig/queryList",{
						...this.page,
						firstKindId:sessionStorage.getItem("firstKindId") || "",
						secondKindId:sessionStorage.getItem("secondKindId") || "",
						thirdKindId:sessionStorage.getItem("thirdKindId") || "",
						humanName:sessionStorage.getItem("hname") || ""
					}).then((data)=>{
						console.info("*** data:",data);
						//将用户列表设置到vue中的模型层
						this.humanFileDigList = data.records;
						this.page.total = data.total;
						// 向上取整(总记录数/每页显示记录数) = 最大页码
						let maxPage =
								Math.ceil(data.total / data.size);
						//将最大页码设置到模型层
						this.maxPage = maxPage;
					});
				}
			}
		}).mount("#app");
	</script>
</html>
